<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <template #header>
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="资源名称" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入资源名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="资源分类" prop="category">
            <el-input v-model="queryParams.category" placeholder="请输入资源分类" clearable style="width: 200px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 200px">
              <el-option label="待审核" :value="1" />
              <el-option label="已通过" :value="2" />
              <el-option label="未通过" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-table v-loading="loading" :data="userResourceList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" width="60" />
        <el-table-column label="资源名称" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="分类" prop="category" :show-overflow-tooltip="true" />
        <el-table-column label="资源类型" prop="type">
          <template #default="scope">
            <el-tag v-if="scope.row.type === 1" type="success">免费</el-tag>
            <el-tag v-else-if="scope.row.type === 2" type="warning">积分</el-tag>
            <el-tag v-else-if="scope.row.type === 3" type="danger">付费</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="danger">未通过</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">已通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" link icon="View" @click="handleView(scope.row)">查看</el-button>
            <el-button v-if="scope.row.status === 1" type="success" link icon="Check" @click="handleApprove(scope.row)">通过</el-button>
            <el-button v-if="scope.row.status === 1" type="danger" link icon="Close" @click="handleReject(scope.row)">拒绝</el-button>
            <el-button type="danger" link icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="total > 0"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 资源详情对话框 -->
    <el-dialog 
      :title="title" 
      v-model="open" 
      width="600px" 
      :modal="false"
      :append-to-body="true"
      :z-index="2500"
      destroy-on-close
    >
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-form-item label="资源名称" prop="name">
          <el-input v-model="form.name" disabled />
        </el-form-item>
        <el-form-item label="资源分类" prop="category">
          <el-input v-model="form.category" disabled />
        </el-form-item>
        <el-form-item label="资源类型" prop="type">
          <el-tag v-if="form.type === 1" type="success">免费</el-tag>
          <el-tag v-else-if="form.type === 2" type="warning">积分</el-tag>
          <el-tag v-else-if="form.type === 3" type="danger">付费</el-tag>
        </el-form-item>
        <el-form-item v-if="form.type === 2" label="所需积分" prop="points">
          <el-input v-model="form.points" disabled />
        </el-form-item>
        <el-form-item v-if="form.type === 3" label="价格" prop="price">
          <el-input v-model="form.price" disabled />
        </el-form-item>
        <el-form-item label="获得积分" prop="pointsEarned">
          <el-input v-model="form.pointsEarned" disabled />
        </el-form-item>
        <el-form-item label="网盘地址" prop="panPath">
          <el-input v-model="form.panPath" disabled />
        </el-form-item>
        <el-form-item label="提取码" prop="panCode">
          <el-input v-model="form.panCode" disabled />
        </el-form-item>
        <el-form-item label="资源描述" prop="description">
          <el-input v-model="form.description" type="textarea" rows="4" disabled />
        </el-form-item>
        <el-form-item v-if="dialogType === 'reject'" label="拒绝原因" prop="rejectReason">
          <el-input v-model="form.rejectReason" type="textarea" rows="4" placeholder="请输入拒绝原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button v-if="dialogType === 'view'" type="primary" @click="cancel">确定</el-button>
          <el-button v-else-if="dialogType === 'approve'" type="success" @click="submitApprove">通过</el-button>
          <el-button v-else-if="dialogType === 'reject'" type="danger" @click="submitReject">拒绝</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 批量操作对话框 -->
    <el-dialog 
      v-model="batchDialogVisible" 
      :title="batchDialogTitle" 
      width="500px" 
      :modal="false"
      :append-to-body="true"
      :z-index="2500"
      destroy-on-close
    >
      <el-form v-if="batchDialogType === 'reject'" label-width="100px">
        <el-form-item label="拒绝原因" prop="batchRejectReason">
          <el-input v-model="batchRejectReason" type="textarea" rows="4" placeholder="请输入拒绝原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="batchDialogVisible = false">取消</el-button>
          <el-button v-if="batchDialogType === 'approve'" type="success" @click="submitBatchApprove">通过</el-button>
          <el-button v-else-if="batchDialogType === 'reject'" type="danger" @click="submitBatchReject">拒绝</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import {
  listUserResourceApi,
  detailUserResourceApi,
  reviewUserResourceApi,
  batchReviewUserResourceApi,
  deleteUserResourceApi
} from '@/api/site/user-resource';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

interface ResourceForm {
  id?: number;
  userId?: number;
  name?: string;
  category?: string;
  downloads?: number;
  type?: number;
  points?: number;
  price?: number;
  pointsEarned?: number;
  panPath?: string;
  panCode?: string;
  description?: string;
  status?: number;
  rejectReason?: string;
}

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  name: undefined,
  category: undefined,
  status: 1 // 默认查询待审核状态
});

// 列表数据
const loading = ref(false);
const userResourceList = ref([]);
const total = ref(0);
const queryRef = ref();

// 多选框选中数据
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const selectedIds = ref([]);

// 弹窗相关
const open = ref(false);
const title = ref('');
const form = ref<ResourceForm>({});
const dialogType = ref('view'); // view, approve, reject
const formRef = ref();

// 批量操作弹窗相关
const batchDialogVisible = ref(false);
const batchDialogTitle = ref('');
const batchDialogType = ref('');
const batchRejectReason = ref('');

// 初始化
onMounted(() => {
  getList();
});

// 获取用户资源列表
const getList = () => {
  loading.value = true;
  listUserResourceApi(queryParams).then((response) => {
    userResourceList.value = response.data.records || [];
    total.value = response.data.total || 0;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

// 表单重置
const reset = () => {
  form.value = {
    id: undefined,
    userId: undefined,
    name: undefined,
    category: undefined,
    downloads: 0,
    type: 1,
    points: 0,
    price: 0,
    pointsEarned: 0,
    panPath: undefined,
    panCode: undefined,
    description: undefined,
    status: 1,
    rejectReason: undefined
  };
};

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置按钮操作
const resetQuery = () => {
  queryRef.value?.resetFields();
  handleQuery();
};

// 多选框选中数据
const handleSelectionChange = (selection: any) => {
  selectedIds.value = selection.map((item: any) => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
};

// 查看按钮操作
const handleView = (row: any) => {
  reset();
  dialogType.value = 'view';
  title.value = '查看用户资源';
  detailUserResourceApi(row.id).then((response) => {
    form.value = response.data;
    open.value = true;
  });
};

// 通过按钮操作
const handleApprove = (row: any) => {
  reset();
  dialogType.value = 'approve';
  title.value = '审核通过';
  detailUserResourceApi(row.id).then((response) => {
    form.value = response.data;
    open.value = true;
  });
};

// 拒绝按钮操作
const handleReject = (row: any) => {
  reset();
  dialogType.value = 'reject';
  title.value = '审核拒绝';
  detailUserResourceApi(row.id).then((response) => {
    form.value = response.data;
    open.value = true;
  });
};

// 提交审核通过操作
const submitApprove = () => {
  reviewUserResourceApi({
    id: form.value.id,
    status: 2
  }).then(() => {
    ElMessage.success('审核通过成功');
    open.value = false;
    getList();
  });
};

// 提交审核拒绝操作
const submitReject = () => {
  if (!form.value.rejectReason) {
    ElMessage.warning('请输入拒绝原因');
    return;
  }
  reviewUserResourceApi({
    id: form.value.id,
    status: 0,
    rejectReason: form.value.rejectReason
  }).then(() => {
    ElMessage.success('审核拒绝成功');
    open.value = false;
    getList();
  });
};

// 批量通过按钮操作
const handleBatchApprove = () => {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请至少选择一条记录');
    return;
  }
  batchDialogType.value = 'approve';
  batchDialogTitle.value = '批量审核通过';
  batchDialogVisible.value = true;
};

// 批量拒绝按钮操作
const handleBatchReject = () => {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请至少选择一条记录');
    return;
  }
  batchDialogType.value = 'reject';
  batchDialogTitle.value = '批量审核拒绝';
  batchRejectReason.value = '';
  batchDialogVisible.value = true;
};

// 提交批量通过操作
const submitBatchApprove = () => {
  batchReviewUserResourceApi({
    ids: selectedIds.value,
    status: 2
  }).then(() => {
    ElMessage.success('批量审核通过成功');
    batchDialogVisible.value = false;
    getList();
  });
};

// 提交批量拒绝操作
const submitBatchReject = () => {
  if (!batchRejectReason.value) {
    ElMessage.warning('请输入拒绝原因');
    return;
  }
  batchReviewUserResourceApi({
    ids: selectedIds.value,
    status: 0,
    rejectReason: batchRejectReason.value
  }).then(() => {
    ElMessage.success('批量审核拒绝成功');
    batchDialogVisible.value = false;
    getList();
  });
};

// 删除按钮操作
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认删除该用户资源吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteUserResourceApi(row.id).then(() => {
      ElMessage.success('删除成功');
      getList();
    });
  });
};

// 取消按钮
const cancel = () => {
  open.value = false;
  reset();
};

// 分页大小改变
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val;
  getList();
};

// 分页页码改变
const handleCurrentChange = (val: number) => {
  queryParams.pageNum = val;
  getList();
};
</script>

<style scoped>

.search-wrapper {
  margin-bottom: 20px;
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 覆盖对话框样式 */
:deep(.el-overlay) {
  z-index: 1900 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-dialog) {
  z-index: 2000 !important;
  position: relative;
}

:deep(.el-dialog__wrapper) {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style> 